<template>
	<div class="app-container">
		<el-form :inline="true" :model="queryParams" label-width="80px" ref="queryForm" size="small"
				 v-show="showSearch">

			<el-form-item label="创建时间">
				<el-date-picker end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" style="width: 240px"
								type="daterange" v-model="daterangeCreateTime" value-format="yyyy-MM-dd"/>
			</el-form-item>

			<el-form-item>
				<el-button @click="handleQuery" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
				<el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table :data="auditList" v-loading="loading">
			<el-table-column align="center" type="selection" width="55"/>
			<el-table-column align="center" label="主键" prop="id"/>
			<el-table-column align="center" label="套餐名称" prop="serviceItemName"/>
			<el-table-column align="center" label="套餐备注" prop="serviceItemInfo" show-overflow-tooltip/>
			<el-table-column align="center" label="套餐价格" prop="serviceItemPrice"/>
			<el-table-column align="center" label="流程实例id" prop="instanceId"/>
			<el-table-column align="center" label="创建者" prop="creator.nickName"/>
			<el-table-column align="center" label="备注" prop="info" show-overflow-tooltip/>

			<el-table-column align="center" label="当前任务" prop="taskName"/>

			<el-table-column align="center" label="审核人" prop="auditors" show-overflow-tooltip>
				<template v-slot="scope">
					{{ scope.row.status === 0 ? scope.row.auditors : '无' }}
				</template>
			</el-table-column>

			<el-table-column align="center" label="状态" prop="status">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.cp_audit_status" :value="scope.row.status"/>
				</template>
			</el-table-column>

			<el-table-column align="center" label="创建时间" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
				<template slot-scope="scope">
					<el-button
						@click="handleAudit(scope.row)"
						icon="el-icon-edit"
						size="mini"
						type="text"
						v-if="scope.row.status === 0">进行审批</el-button>

					<el-button
						@click="handleEditServiceItem(scope.row)"
						size="mini"
						type="text"
						v-if="scope.row.status === 1">修改表单</el-button>

					<el-button
						@click="handleReapply(scope.row)"
						size="mini"
						type="text"
						v-if="scope.row.status === 1">重新审批</el-button>

					<el-button
						@click="handleHistory(scope.row)"
						icon="el-icon-s-check"
						size="mini"
						type="text"
						v-hasPermi="['workflow:history:list']">审批历史</el-button>

					<!-- 查看进度的权限: v-hasPermi="['workflow:audit:resource']" -->
					<el-button
						@click="handleViewImage(scope.row)"
						icon="el-icon-search"
						size="mini"
						type="text">查看进度
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			:limit.sync="queryParams.pageSize"
			:page.sync="queryParams.pageNum"
			:total="total"
			@pagination="getList"
			v-show="total>0"/>

		<el-dialog :visible.sync="bpmnImageDialog" append-to-body title="流程图" width="1200px">
			<div v-html="currentBpmnImage"/>
		</el-dialog>

		<!-- 审批弹框 -->
		<el-dialog :visible.sync="open" append-to-body title="审批任务" width="500px">
			<el-form :model="form" :rules="rules" label-width="80px" ref="form">
				<el-form-item label="审批结果">
					<el-radio :label="true" border v-model="form.result">通过</el-radio>
					<el-radio :label="false" border v-model="form.result">拒绝</el-radio>
				</el-form-item>

				<el-form-item label="审批结果">
					<el-input placeholder="请输入审批备注信息" type="textarea" v-model="form.info"/>
				</el-form-item>
			</el-form>

			<div class="dialog-footer" slot="footer">
				<el-button @click="submitForm" type="primary">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 编辑服务单项对话框 -->
		<el-dialog :visible.sync="serviceItemEditDialog" append-to-body title="修改服务项" width="600px">
			<el-form :model="serviceItemForm" :rules="serviceItemRules" label-width="150px" ref="serviceItemForm">
				<el-form-item label="服务名称：" prop="name">
					<el-input v-model="serviceItemForm.name"/>
				</el-form-item>
				<el-form-item label="服务原价：" prop="originalPrice">
					<el-input v-model="serviceItemForm.originalPrice"/>
				</el-form-item>
				<el-form-item label="服务折扣价：" prop="discountPrice">
					<el-input v-model="serviceItemForm.discountPrice"/>
				</el-form-item>
				<el-form-item label="是否套餐：" prop="carPackage">
					<el-radio-group v-model="serviceItemForm.carPackage">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="服务分类：" prop="serviceCatalog">
					<el-select size="medium" v-model="serviceItemForm.serviceCatalog">
						<el-option label="维修" value="0"></el-option>
						<el-option label="保养" value="1"></el-option>
						<el-option label="其他" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注信息：" prop="info">
					<el-input v-model="serviceItemForm.info"/>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="submitServiceItemForm" type="primary">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 审批历史 -->
		<el-dialog :visible.sync="historyListDialog" append-to-body title="审批历史" width="1200px">
			<el-table :data="historyList" v-loading="loading">
				<el-table-column align="center" label="任务名称" prop="activityName"/>
				<el-table-column align="center" label="处理人"   prop="assigneeName"/>
				<el-table-column align="center" label="审批意见" prop="comment"/>

				<el-table-column align="center" label="开始时间" prop="startTime">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="结束时间" prop="endTime">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="耗时"    prop="durationInMillis"/>
			</el-table>

			<div class="dialog-footer" slot="footer">
				<el-button @click="historyListDialog = false">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {historyList} from "../../../api/workflow/done";
	import {listAudit} from "../../../api/workflow/todo";
	import {doAudit, getProcessingImage, reapply} from "../../../api/workflow/audit";
	import {updateForAudit, getServiceItem} from "../../../api/business/serviceItem";

	export default {
		name: "Audit",
		dicts: ['cp_audit_status'],
		data() {
			return {
				historyListDialog: false,
				bpmnImageDialog: false,
				// 是否显示弹出层
				open: false,
				serviceItemEditDialog: false,
				// 当前 流程定义 的 图片数据
				currentBpmnImage: null,

				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 套餐审核表格数据
				auditList: [],
				historyList: [],
				// 创建时间时间范围
				daterangeCreateTime: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					params: {}
				},
				// 表单参数
				form: {
					result: true,
					info: ''
				},
				serviceItemForm: {},
				// 表单校验
				rules: {},
				serviceItemRules: {}
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询套餐审核列表 */
			getList() {
				this.loading = true;
				this.queryParams.params = {};
				if (null != this.daterangeCreateTime && '' !== this.daterangeCreateTime) {
					this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
					this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
				}
				listAudit(this.queryParams).then(response => {
					this.auditList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.serviceItemEditDialog = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					result: true,
					info: ''
				};
				this.serviceItemForm = {}
				this.resetForm("form");
				this.resetForm('serviceItemForm')
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.daterangeCreateTime = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			/** 查看流程进度 */
			handleViewImage(row) {
				getProcessingImage(row.instanceId).then(res => {
					this.currentBpmnImage = res
					this.bpmnImageDialog = true
				})
			},
			/** 审批功能 */
			handleAudit(row) {
				this.open = true
				this.form.id = row.id
				this.form.taskId = row.taskId
			},
			/** 修改表单 */
			handleEditServiceItem(row) {
				this.reset();
				const id = row.serviceItemId;
				getServiceItem({ id }).then(response => {
					delete response.data.createTime;
					this.serviceItemForm = response.data;
					this.serviceItemForm.auditId = row.id // 将审核记录的ID携带到表单中
					this.serviceItemForm.serviceCatalog = this.serviceItemForm.serviceCatalog.toString();
					this.serviceItemEditDialog = true;
				});
			},
			handleReapply(row) {
				// 弹窗提示用户是否重新申请
				this.$modal.confirm('确认重新申请审核吗????').then(function (data) {
					return reapply({id: row.id, taskId: row.taskId});
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("重新申请成功");
				}).catch(() => {});
			},
			/** 查看 审批历史 */
			handleHistory(row) {
				historyList({instanceId: row.instanceId}).then(res => {
					this.historyList = res.data
					this.historyListDialog = true
				})
			},
			/** 提交弹窗 */
			submitForm() {
				// 提交参数: 审核记录ID/ 任务ID/ 结果/ 备注信息
				doAudit(this.form).then(() => {
					// 刷新表格
					this.getList()
					// 提示消息
					this.$modal.msgSuccess("审核成功")
					// 关闭弹窗
					this.cancel()
				})
			},
			/** 在审核记录里提交修改服务项的弹窗 */
			submitServiceItemForm() {
				this.$refs["serviceItemForm"].validate(valid => {
					if (valid) {
						updateForAudit(this.serviceItemForm).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.cancel()
							this.getList();
						});

					}
				});
			}
		}
	};
</script>
